<template>
  <div class="extend">
    <van-nav-bar
        :title="$t('delay')"
        left-arrow
        @click-left="$router.go(-1)"
    />

    <div class="wrapper">
      <div class="card">
        <!--          通过金额-->
        <div class="card_item" v-show="details.passAmount">
          <span>{{ $t('order_approved_amoun') }}</span> :<span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.passAmount) }}</span>
        </div>
        <!--          利息费用-->
        <div class="card_item" v-show="details.shouldInterest">
          <span>{{ $t('rateFee_detail') }}</span> :<span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.shouldInterest) }}</span>
        </div>
        <!--          已还金额-->
        <div class="card_item" v-show="details.lastRepaymentDay">
          <span>{{ $t('order_last_pay_time') }}</span> :<span>{{ formatterMoney(details.lastRepaymentDay)  }}</span>
        </div>
        <!--          最后还款日-->
        <div class="card_item" v-show="details.actualTotal">
          <span>{{ $t('delay_already_repayment') }}</span> :<span>{{ details.actualTotal }}</span>
        </div>
        <!--          逾期天数-->
        <div class="card_item" v-show="details.overdueDay">
          <span>{{ $t('order_overdue_day') }}</span> :<span>{{ details.overdueDay }}{{ $t('day') }}</span>
        </div>

        <!--          逾期罚息-->
        <div class="card_item" v-show="details.totalOverdueFine">
          <span>{{ $t('order_overdue_interest') }}</span> :<span class="symbol">{{ $t('symbol') }}</span><span>{{
            details.totalOverdueFine
          }}</span>
        </div>
        <!--          应还金额-->
        <div class="card_item" v-show="details.shouldTotal" style="margin-bottom: 0">
          <span>{{ $t('amount_due') }}</span> : <span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.shouldTotal) }}</span>
        </div>
        <!--          本次还款金额-->
        <div class="card_item" v-show="details.notTotal" style="margin-bottom: 0">
          <span>{{ $t('amount_this_repayment') }}</span> : <span class="symbol">{{
            $t('symbol')
          }}</span><span>{{ formatterMoney(details.notTotal) }}</span>
        </div>
      </div>
      <div class="card extend_box" style="margin-top: 8px;">
        <div class="extend_item" @click="selectExtend">
          <div class="extend_link">
            <div class="title">{{ $t('delay_day') }}</div>
            <div class="content">
              <span style="margin-right: 5px">{{ rollOverDays ? rollOverDays : $t('delay_checked_hint') }}</span>
              <van-icon name="arrow" color="#9D9D9D"/>
            </div>
          </div>
        </div>
        <div class="extend_item">
          <div class="extend_link">
            <div class="title">{{ $t('delay_service_rate') }}</div>
            <div class="content">
              <span style="margin-right: 5px;color: #333333" v-show="extendServe"><span class="symbol">{{
                  $t('symbol')
                }}</span>{{ formatterMoney(extendServe) }}</span>
            </div>
          </div>
        </div>
        <div class="extend_item">
          <div class="extend_link">
            <div class="title">{{ $t('delay_repayment_date') }}</div>
            <div class="content">
              <span style="margin-right: 5px;color: #333333" v-show="extendDay">{{ extendDay }}{{ $t('day') }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pay_button">
        <div>
          <!--          虚拟卡支付-->
          <button class="button" @click="virtualCardPay">{{ $t('repayment_virtual_card') }}</button>
        </div>
        <!--        <div style="margin-top: 15px">-->
        <!--          <button class="button">{{ $t('repayment') }}</button>-->
        <!--        </div>-->
      </div>
      <van-action-sheet v-model:show="extendShow">
        <van-picker @confirm="onExtendChange" @cancel="extendShow = false"
                    :columns-field-names="{  text: 'rollOverDay'}"
                    :columns="extendActions">
          <template #option="row">
            {{ row.rollOverDay }} {{ $t('day') }}
          </template>
        </van-picker>
      </van-action-sheet>
      <van-dialog v-model:show="visibleShow" :title="$t('repayment_confirm')" @confirm="visibleConfirm"
                  show-cancel-button>
        <div style="text-align: center;padding: 15px;box-sizing: border-box;font-weight: 600">
          <div>{{ $t('delay_service_rate') }}: {{ formatterMoney(extendServe) }}</div>
          <div>{{ $t('repayment_type') }}: {{ $t('repayment_virtual_card') }}</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from "vue";
import {repaymentDetails, fetchExtendDay, registerVirtual} from '@/api/order'
import router from "@/router";
import {dateFormat, formatMoney} from '@/utils/tool'
import {Dialog, Toast} from "vant";
import {useI18n} from 'vue-i18n'
import {useStore} from "vuex";

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    const {tm} = useI18n()
    const details = ref({})
    const store = useStore()
    const {loanRecordId} = router.currentRoute.value.query
    const extendServe = ref(0)
    const extendDay = ref(0)
    const rollOverDays = ref(0)
    const extend_money = ref(0)
    const visibleShow = ref(false)
    const fetchRepaymentDetails = async () => {
      const res = await repaymentDetails({loanRecordId})
     if (res.code === 1) {
       details.value = res.data
     }
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const selectExtend = async () => {
      const res = await fetchExtendDay({loanRecordId})
      if (res.code === 1) {
        extendSheet.extendShow = true
        extendSheet.extendActions = res.data
      }
    }
    // 虚拟卡支付
    const virtualCardPay = () => {
      if (!rollOverDays.value) {
        Toast({
          message: tm('delay_checked_hint')
        })
        return
      }
      visibleShow.value = true
      extend_money.value = extendServe.value + details.value.notTotal
    }
    const visibleConfirm = async () => {
      const res = await registerVirtual({
        payAmount: extendServe.value,
        payType: 1,
        rollDay: rollOverDays.value,
      })
      if (res.code === 1) {
        router.push({
          path: '/virtualCardPay',
          query: {
            loanRecordId: loanRecordId
          }
        })
      }
    }

    const extendSheet = reactive({
      extendShow: false,
      extendActions: [],
      onExtendChange: (row) => {
        const {rollOverDay, rollOverInterest} = row
        const lastRepaymentDay = details.value.lastRepaymentDay.substr(0, 10).split('-')
        const lastRepaymentDayStr = lastRepaymentDay[0] + '-' + lastRepaymentDay[1] + '-' + lastRepaymentDay[2]
        /*
        * extendDay 展期后时间
        * lastRepaymentDay 最后还款日
        * rollOverDay 展期天数
        * */
        const date = new Date()
        const nowDate = dateFormat(new Date(date.setDate(date.getDate() + rollOverDay)), 'YYYY-mm-dd')
        const days = ((new Date(nowDate) - new Date(lastRepaymentDayStr)) / (1000 * 60 * 60 * 24));
        const feeNum = details.value.shouldTotal * rollOverInterest
        // 展期天数
        rollOverDays.value = rollOverDay
        //    展期后还款日
        extendDay.value = days
        //    服务费
        extendServe.value = feeNum.toFixed(2)
        extendSheet.extendShow = false
      }
    })
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    fetchRepaymentDetails()
    return {
      extendDay,
      extendServe,
      selectExtend,
      rollOverDays,
      virtualCardPay,
      extend_money,
      visibleConfirm,
      visibleShow,
      details,
      formatterMoney,
      ...toRefs(extendSheet)
    }
  }
}
</script>

<style lang="less" scoped>


.extend {
  background-color: #f2f3f5;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }

  }

  .wrapper {
    padding: 10px;

    .card {
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 15px;

      .card_item {
        font-size: 13px;
        margin-bottom: 5px;


        .text {
          color: #828282;
        }

        .value {
          color: #333333;
          margin-left: 5px;
        }
      }

      .extend_item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #E5E5E5;

        .extend_link {
          font-size: 11px;
          color: #898989;
          display: flex;
          justify-content: space-between;

          .content {
            display: flex;
            align-items: center;
          }
        }

      }
    }

    .extend_box {
      box-sizing: border-box;
      padding: 0 15px !important;
    }

    .pay_button {
      margin-top: 40px;
      text-align: center;

      .button {
        width: 80%;
        padding: 5px 0;
        color: #ffffff;
        border: none;
        font-size: 16px;
        border-radius: 14px;
        margin-bottom: 10px;
        background: linear-gradient(-45deg, #FF5252, #FF8C3C);
        box-shadow: 0px 4px 10px 0px
      }
    }
  }
}
</style>
